<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!-- begin::Head -->
<head>
    <title>
        后台管理 | 频道管理
    </title>

    <th:block th:include="includes/header :: header"></th:block>
    <link href="/assets/plugins/treeTable/themes/vsStyle/treeTable.css" rel="stylesheet" type="text/css"/>
</head>
<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">

<div class="m-portlet m-portlet--mobile">
    <div class="m-portlet__head">
        <div class="m-portlet__head-caption">
            <div class="m-portlet__head-title">
                <h3 class="m-portlet__head-text">
                    频道管理
                </h3>
            </div>
        </div>

        <div class="m-portlet__head-tools">
            <a href="/channel/form" class="btn btn-accent m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill">
                <span>
                    <i class="la la-plus"></i>
                    <span>
                        新增
                    </span>
                </span>
            </a>
        </div>
    </div>
    <div class="m-portlet__body">
        <!--begin: Datatable -->
        <table class="table table-striped table-bordered table-hover" id="html_table" width="100%">
            <thead>
            <tr>
                <th title="Field #1">
                    频道名称
                </th>
                <th title="Field #2">
                    排序
                </th>
                <th title="Field #3">
                    操作
                </th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="channel : ${channels}" th:attr="id=${channel.id}, pId=${channel.pid}">
                <td th:text="${channel.name}">天涯明月刀</td>
                <td th:text="${channel.sort}">100</td>
                <td>
                    <div class="m-demo__preview m-demo__preview--btn">
                        <a href="#" class="btn btn-primary btn-sm m-btn  m-btn m-btn--icon">
                            <span>
                                <i class="la la-edit"></i>
                                <span>
                                    编辑
                                </span>
                            </span>
                        </a>

                        <a href="#" class="btn btn-danger btn-sm m-btn  m-btn m-btn--icon">
                            <span>
                                <i class="la la-trash"></i>
                                <span>
                                    删除
                                </span>
                            </span>
                        </a>

                        <a href="#" class="btn btn-brand btn-sm m-btn  m-btn m-btn--icon">
                            <span>
                                <i class="la la-plus"></i>
                                <span>
                                    添加下级菜单
                                </span>
                            </span>
                        </a>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
        <!--end: Datatable -->
    </div>
</div>

<th:block th:include="includes/footer :: footer"></th:block>
<script src="/assets/plugins/treeTable/jquery.treeTable.js" type="text/javascript"></script>
<script>
    $(function () {
        var option = {
            expandLevel: 2,
            column: 0
        };
        $('#html_table').treeTable(option);
    });
</script>
</body>
</html>